<!DOCTYPE html>
<html lang="zh">

<head>
    <title>术语库管理</title>
    <link id="theme" rel="stylesheet" type="text/css" href="../css/light.css">
    <link rel="stylesheet" type="text/css" href="../css/fonts.css">
    <style>
        .toolbar {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }
        .toolbar button {
            margin-right: 10px;
            padding: 8px 16px;
        }
        .toolbar h2 {
            margin: 0;
            flex-grow: 1;
        }
        .table-container {
            flex: 1;
            overflow: auto;
            padding: 10px;
            max-height: calc(100vh - 120px);
            min-height: 400px;
        }
        .term-table {
            width: 100%;
            border-collapse: collapse;
        }
        .term-table th, .term-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        .term-table th {
            background-color: #f5f5f5;
            font-weight: bold;
        }
        .term-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        .term-table tr:hover {
            background-color: #e8e8e8;
        }
        .term-table tr.selected {
            background-color: #d4edda;
        }
        .action-buttons {
            white-space: nowrap;
        }
        .action-buttons button {
            margin-right: 5px;
            padding: 4px 8px;
            font-size: 12px;
        }
        .edit-button {
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
        }
        .delete-button {
            background-color: #dc3545;
            color: white;
            border: none;
            cursor: pointer;
        }
        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }
    </style>
</head>

<body class="dialogBody" onload="new GlossaryManager();">
    <div class="toolbar">
        <h2 id="title">术语库管理</h2>
        <button id="addTermBtn">添加术语</button>
        <button id="refreshBtn">刷新</button>
        <button id="exportBtn">导出</button>
    </div>
    
    <div class="table-container">
        <div id="loading" class="loading" style="display: none;">
            正在加载术语...
        </div>
        <table id="termsTable" class="term-table" style="display: none;">
            <thead>
                <tr>
                    <th width="5%">#</th>
                    <th width="35%">源术语</th>
                    <th width="15%">源语言</th>
                    <th width="35%">目标术语</th>
                    <th width="15%">目标语言</th>
                    <th width="10%">操作</th>
                </tr>
            </thead>
            <tbody id="termsTableBody">
            </tbody>
        </table>
        <div id="noTerms" style="display: none; text-align: center; padding: 20px; color: #666;">
            此术语库中暂无术语
        </div>
    </div>

    <script src="../js/glossaryManager.js"></script>
</body>

</html> 